<template>
  <picker @change="bindPickerChange" @columnchange="columnchange" mode="multiSelector" :value="indexs" :range="dateList" :disabled="disabled">
    <view class="wzl-date-view" :class="{ disabled }" @click="setDefaultData">
      <text v-if="dateStr" class="date-text">{{ dateStr }}</text>
      <text v-else class="placeholder">{{ placeholder }}</text>
    </view>
  </picker>
</template>

<script>
import moment from './moment.js'
export default {
  props: {
    placeholder: {
      type: String,
      default: '期望时间'
    },
    disabled: Boolean,
    value: [Date, Number],
    startYear: {
      type: Number,
      default: 1970
    },
    endYear: {
      type: Number,
      default:new Date().getFullYear()
    }
  },
  data() {
    return {
      currentEndYear: this.endYear,
      monthList: new Array(12).fill(0).map((o, i) => this.transformByType(i + 1, '月')),
      dayList: [],
      hourList: new Array(24).fill(0).map((o, i) => this.transformByType(i, '时')),
      minuteList: new Array(60).fill(0).map((o, i) => this.transformByType(i, '分')),
      activeYear: 0,
      activeMonth: 0,
      activeDay: 0,
      activeHour: 0,
      activeMinute: 0,
      dateStr: ''
    }
  },
  computed: {
    yearList() {
      return new Array((this.currentEndYear) - this.startYear + 1).fill(0).map((o, i) => this.transformByType(i + this.startYear, '年'))
    },
    dateList() {
      return [this.yearList, this.monthList, this.dayList, this.hourList, this.minuteList]
    },
    indexs() {
      return [this.activeYear, this.activeMonth, this.activeDay, this.activeHour, this.activeMinute]
    }
  },
  watch: {
    value: {
      async handler(n) {
        // 保证时间选择列表的数据准备完成
        await this.$nextTick()
        this.setDefaultActive()
      },
      immediate: true
    },
    activeYear: {
      handler(n) {
        this.setDayList()
      },
      immediate: true
    },
    activeMonth: {
      handler(n) {
        this.setDayList()
      },
      immediate: true
    },
    dayList: {
      handler(n) {
        const maxDay = n.length - 1
        this.activeDay > maxDay && (this.activeDay = maxDay)
      },
      immediate: true
    }
  },
  methods: {
    setDayList() {
      const currentYear = parseInt(this.yearList[this.activeYear])
      const currentMonth = parseInt(this.monthList[this.activeMonth])
      this.dayList = this.getDayByYearAndMonth(currentYear, currentMonth)
    },
    getDateStr() {
      return this.yearList[this.activeYear] + this.monthList[this.activeMonth] + this.dayList[this.activeDay] + this.hourList[this.activeHour] + this.minuteList[this.activeMinute]
    },
    setDefaultActive() {
      const date = moment(this.value || new Date())
      const year = date.format('YYYY年')
      const month = date.format('M月')
      const day = date.format('D日')
      const hour = date.format('HH时')
      const minute = date.format('mm分')
      this.activeYear = this.yearList.indexOf(year)
      this.activeMonth = this.monthList.indexOf(month)
      this.activeDay = this.dayList.indexOf(day)
      this.activeHour = this.hourList.indexOf(hour)
      this.activeMinute = this.minuteList.indexOf(minute)
      this.value && (this.dateStr = this.getDateStr())
    },
    setDefaultData() {
      // 防止时间跨年了。需要重新设置结束年
      !this.endYear && (this.currentEndYear = new Date().getFullYear())
      this.setDefaultActive()
    },
    transformByType(i, type) {
      switch (type) {
        case '时':
        case '分':
          return (i < 10 ? '0' : '') + i + type
        default:
          return i + type
      }
    },

    getDayByYearAndMonth(year, month) {
      let days = new Date(year, month, 0).getDate()
      const dayList = []
      for (let i = 1; i <= days; i++) {
        dayList.push(`${i}日`)
      }
      return dayList
    },
    bindPickerChange({ detail: { value } }) {
      const unix = moment(this.getDateStr(), 'YYYY年M月D日HH:mm').unix()
      this.$emit('input', unix * 1000)
	  console.log("ddd",unix);
    },
    columnchange({ detail: { column, value } }) {
      const maps = ['activeYear', 'activeMonth', 'activeDay', 'activeHour', 'activeMinute']
      const currentColumn = maps[column]
      this[currentColumn] = value
	  console.log("eee",this[currentColumn]);
	  
    }
  }
}
</script>

<style lang="scss" scoped>
.wzl-date-view {
  // width: 100%;
  // height: 30px;
  width: 112rpx;
  height: 28rpx;
  // border: 1px solid #bdc6d5;
  display: flex;
  align-items: center;
  justify-content: center;
  // padding: 0 10px;
  &.disabled {
    background: #f5f5f5;
    cursor: not-allowed;
  }
  .date-text,
  .placeholder {
    font-size: 28rpx;
    font-family: 'PingFang SC';
    font-weight: 1000;
  }
  .placeholder {
    color:#000000;
  }
  .date-text {
    color: #666;
  }
}
</style>
